    var pen = new Pen('#ca'); //画笔模块
    var io = new IO(); //通信模块
    var userName = '';
    var flag = false;

    //画图
    pen.canvas.onmousedown = function (e) { //鼠标按下，开始画画
      pen.startPoint(e.layerX, e.layerY);
      io.sendStartPoint(e.layerX, e.layerY);
      flag = true;
    }
    pen.canvas.onmousemove = function (e) { //鼠标移动
      if (flag) {
        pen.drawTo(e.layerX, e.layerY);
        io.sendMovePoint(e.layerX, e.layerY);
      }
    }
    pen.canvas.onmouseup = function () { //鼠标弹起
      flag = false;
    }

    //通信
    io.receiveStartPoint(function (x, y) { //接收远程发送的开始点数据
      pen.startPoint(x, y); //在画布画出点
    });
    io.receiveMovePoint(function (x, y) { //接收远程发送的移动点数据
      pen.drawTo(x, y); //在画布画出点
    });
    io.receivePenStyle(function (width, color) {
      pen.setPenColor(color);
      pen.setPenWidth(width);
    });
    io.receiveClear(function () {
      pen.clearCanvas();
    });
    io.receiveName(function (data) {
      delAllPersion();
      for(var i = 0; i < data.userList.length; i++) {
        addPersion(data.userList[i].name);
      }
    });
    io.receiveMyName(function (data) {
      userName = data;
    });
    io.receiveTitle(function (data) {
      addTitle(data);
    });
    io.listen(function (userName, text) {
      addTalk(userName, text);
    });
    io.receiveSys(function (data) {
      alert(data);
    });

    //操作dom
    var btClear = document.querySelector('.btn-claerCanvas');
    var btnEraser = document.querySelector('.btn-eraser');
    var btnPen = document.querySelector('.btn-pen');
    var colorSelector = document.querySelector('#color-selector');
    var penWidthCon = document.querySelector('.pen-width-con');
    var lis = document.querySelectorAll('.pen-width-con li');
    var persionCon = document.querySelector('.persion-con');
    var showCon = document.querySelector('.talk-show');
    var btnSend = document.querySelector('#btn-send');
    var input = document.querySelector('.input');
    var problem = document.querySelector('.problem span');

    btClear.onclick = function () { //清空画布
      pen.clearCanvas();
      io.sendClear();
    }
    btnEraser.onclick = function () { //选择橡皮擦
      pen.setPenIcon('eraser');
      pen.clearLine();
      io.sendPenStyle(pen.penWidth, pen.penColor);
    }
    btnPen.onclick = function () { //选择画笔
      pen.setPenIcon('pen');
      pen.currentPen();
      io.sendPenStyle(pen.penWidth, pen.penColor);
    }
    colorSelector.onchange = function () { //获取选择的颜色
      pen.setPenColor(this.value);
      io.sendPenStyle(pen.penWidth, pen.penColor);
    }
    btnSend.onclick = function () {
      if (!!input.value) {
        addTalk(userName, input.value);
        io.say(userName, input.value);
        input.value = '';
      }
    }

    penWidthCon.onclick = function (e) { //监听画笔列表
      var currentNode = e.srcElement.localName;
      var baseWidth = 2;
      var select = Number(e.srcElement.className.split('-')[1]);

      for (var i = 0; i < lis.length; i++) {
        lis[i].className = lis[i].className.split(' ')[0];
      }

      if (currentNode !== 'li') {
        e.srcElement.parentNode.className += ' width-select'
      } else {
        e.srcElement.className += ' width-select'
      }

      pen.setPenWidth(baseWidth * select);
      io.sendPenStyle(pen.penWidth, pen.penColor);
    }


    //通用方法
    function addPersion(name) {
      var code = document.createElement('div');
      code.className = 'persion';
      code.innerText = name;
      persionCon.appendChild(code);
    }
    function delAllPersion() {
      var persion = document.querySelectorAll('.persion');
      for(var i = 0; i < persion.length; i++) {
        persionCon.removeChild(persion[i]);
      }
    }

    function addTalk(name, text) {
      var code = document.createElement('p');
      code.className = 'talk';
      code.innerText = name + ': ' + text;
      showCon.appendChild(code);
      var top = showCon.scrollHeight - showCon.clientHeight;
      showCon.scrollTop = top > 0 ? top : 0;
    }

    function addClassName(oldClassName, ClassName) {
      return oldClassName + ' ' + className;
    }

    function delClassName(oldClassName, className) {
      return oldClassName.split(' ')[0];
    }
    function addTitle(text) {
      problem.innerText = text;
    }